<template>
  <div>
    <el-table :data="data" border v-loading="loading">
      <el-table-column 
        type="index"
        align="center"
        label="序号"
        width="60"
      ></el-table-column>

      <el-table-column 
        label="名称"
        prop="skuName"
      ></el-table-column>

      <el-table-column 
        label="描述"
        prop="skuDesc"
      ></el-table-column>

      <el-table-column 
        label="默认图片"
      >
        <template v-slot="{row}">
          <img :src="row.skuDefaultImg" :alt="row.skuName" class="sku-img" />
        </template>
      </el-table-column>

      <el-table-column 
        label="操作"
      >
        <template v-slot="{row}">
          <el-button type="primary" link>上架</el-button>
          <el-button type="primary" link>编辑</el-button>
          <el-button type="primary" link>查看</el-button>
          <el-button type="primary" link>删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="mt-20"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      :page-sizes="[10, 20, 30, 40]"
      layout="prev, pager, next, jumper, ->, sizes, total"
      @current-change="getDataList"
      @size-change="getDataList"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts">
export default {
  name: 'XTable',
}
</script>

<script lang="ts" setup>
  import { reqGetSkuList } from "../api";
  import { onMounted, ref } from 'vue';

  const data = ref<any[]>([])
  const loading = ref(false)
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(0)

  // 请求列表数据显示
  async function getDataList() {
    loading.value = true
    const result = await reqGetSkuList(currentPage.value, pageSize.value)
    data.value = result.records
    total.value = result.total
    loading.value = false
  }

  onMounted(() => {
    getDataList()
  })

</script>

<style scoped>
.mt-20 {
  margin-top: 20px;
}

.title {
  width: 50px;
  display: flex;
  align-items: center;
}

.sku-img {
  width: 50px;
  height: 50px;
}
</style>
